<script>
import { normal_option } from "../common";
import Base from "./Base";

export default {
  name: "ChartCirque",
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        ...normal_option,
        ...{
          grid: {
            top: 20,
            bottom: 40,
            right: 20,
          },
          legend: {
            show: true,
            type: "scroll",
            top: "middle",
            right: "5%",
            orient: "vertical",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["35%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderWidth: 4,
              borderColor: "#fff",
            },
          },
        ],

      },
    };
  },
  computed: {
    option: function () {
      let color =
        this.dataset.option && this.dataset.option.color
          ? this.dataset.option.color
          : [];
      let formatter =
        this.dataset.option &&
        this.dataset.option.legend &&
        this.dataset.option.legend.formatter
          ? this.dataset.option.legend.formatter
          : this.defaultOption.legend.formatter;
      let tooltip =
        this.dataset.option && this.dataset.option.tooltip
          ? this.dataset.option.tooltip
          : normal_option.tooltip;

      let series =
        this.dataset.option && this.dataset.option.series
          ? this.dataset.option.series
          : this.defaultOption.series;

      return {
        ...this.defaultOption,
        color,
        legend: {
          ...this.defaultOption.legend,
          formatter: formatter,
        },
        tooltip,
        series,
        dataset: {
          dimensions: this.dataset.dimensions,
          source: this.dataset.source.reduce((r, c) => {
            r.push({
              ...c,
              tooltip_value: c[this.dataset.dimensions[1]],
            });
            return r;
          }, []),
        },
      };
    },
  },
};
</script>
